Visual Studio Code 拡張の「GitHub Pull Requests」を使ってみました
2024.11.21いわさです。
最近社内にて Visual Studio Code 上で Web アプリケーションや AWS インフラテンプレートを開発することがあります。
チーム開発に GitHub を使っているのですが、Issue や Pull Request の処理で IDE と GitHub (Web ブラウザ) を行ったり来たりするのが面倒だなと思い始めました。
何か良いものは無いだろうかとマーケットプレイスを探してみると GitHub Pull Requests という GitHub 公式の Visual Studio Code 拡張を見つけました。
本日時点のバージョンは 0.101 です。
マーケットプレイス上プレビュー表記はありませんでしたが、どこかで正式版 1.0 になるのかな。
こちらを試してみましたので紹介します。
前提として、私は GitHub をライトな使い方しかしていなくて、Milestone で管理されている Issue ごとにブランチを作成し、ローカルで軽く動作確認出来たら Pull Request を作成してマージという感じです。
リモートの Develop ブランチにマージされると Amplify が勝手にビルドとデプロイをしてくれます。
ブランチ戦略は Git フローに近い感じで、恒久的には main と develop ブランチがあって、一時的に feature/xxx や fix/xxx を作成して develop にバンバンマージしていってます。
その後マイルストーン完了時に develop から main にマージします。とはいえあまり厳密にはやっていなくて適当です。
ローカル開発の観点でいうと、Issue を簡単に管理出来て、そこからサッとブランチを作成し実装後にプルリクエストの作成からマージまでが高速に出来ると良い感じです。
基本機能：Issue と Pull Request の管理
拡張機能のインストール後、GitHub アイコンのサイドメニューから次のように Pull Ruquest と Issue が表示されていることが確認出来ました。
どこかで見た人たちのアイコンが並んでいますが、現在オープン中の Pull Ruquest だったり、あるいは自分にアサインされている Issue、マイルストーンごとのタスクなどを確認することが出来ます。
ここをサッと見ることで自分のレビュー待ち Pull Request が確認出来るのも良いですね。
Issue へのアクセス
ということでまずは Issue 周りをどう操作出来るのかを確認してみます。
前提として GitHub 上で Milestone を作成し、Issue を紐づけて管理しています。
いまちょうど #71 の Issue を作業しようとしていたのでここを中心に見ていってみましょう。
対象の Issue のツールチップには Issue 内容が表示されています。軽く確認する分にはこれで十分そうです。
Issue 操作用のアイコンが 2 つ並んでいます。
以下のアイコンからは Gitub 上で Issue ページを開くことが出来るみたいです。押してみましょう。
ブラウザで開くことが出来ました。
Visual Studio Code 上で確認できない情報についてはこちらから確認する感じでしょうかね。
チェックアウト＆自動でブランチ作成
こちらのアイコンは対象 Issue の作業を開始する際に押します。
押すと Git チェックアウトを実行してくれるのですが、Issue に紐づくブランチに自動で切り替えてくれます。
紐づくブランチが無い場合はローカル設定に基づいて自動でローカルブランチを作成してくれます。
複数 Issue の対応を別ブランチで並行で進める場合があると思うのですが、Issue ベースで切り替え出来るので便利ですね。
Issue 作業の停止ボタンを押すとデフォルトブランチに切り替わります。
自動作成のブランチ名は設定で管理されており、デフォルトではユーザー名と Issue 番号で作成されます。
いくつか変数も使えるので自動作成ブランチ名を変更したい場合はこちらの設定を変更しましょう。
また、ブランチ名を自動生成で確定させずにユーザーにブランチ名を入力させることも出来ます。
以下の設定でpromptを選択しましょう。
Issue を開始しようとした時に、自動生成されたブランチ名がデフォルトとして表示されつつ、任意のブランチ名を指定出来るようになります。1 ステップ操作を挟むことになりますが、これは良さそうですね。
新規 Issue 作成
また、実装中に別の課題に気がついてサッと Issue を作成したい時もよくあると思います。
Issue 作成も Visual Studio Code 上から可能です。Issue の Create an Issue アイコンを押しましょう。
そうすると Issue テンプレートを選択することが出来ます。
あとは Issue の内容をテキストベースで入力します。
1 行目は Issue タイトルになる、3 ~ 6 行目以降では属性を指定するなど、ちょっと指定方法に慣れる必要はあります。
アサインされた状態で Issue 作成出来ましたね。
Milestone 指定するの忘れていましたが、Visual Studio Code の Issue パネルも更新してみると新しく登録された Issue を確認することが出来ました。
また、こちらも便利だなーと思ったのですが、コード上の TODO コメントからサッと Issue を作成することも出来ます。
対応中の Issue に関連する部分で別途追加対応が必要な部分は積極的に TODO コメント入れていこうかな。
Pull Request の処理
ローカルブランチ上で Issue 作業が終わったら最後に Pull Request を作成してマージですね。
Pull Request パネルから「Create Pull Request」アイコンを押します。
Pull Request の作成内容もすべて Visual Studio Code 上で入力出来ます。
入力方法はリポジトリの Pull Request テンプレートが使われています。
ベースブランチが同じものになっていたので手動で変更しました。
設定みた感じベースブランチの指定は出来なさそうだったので、毎回変更する必要がありそうです。今後のアップデートで指定出来るようになると良いですね。
あとはレビューアが作成したプルリクエストの内容を確認します。
コードエディタ上で差分の確認ができるのと、今回試してなかったのですがレビューコメントについてもエディター上で確認出来るようです。
あとは Create Mert Commit からマージしてオプションでブランチも削除します。
このあたりも Issue 作成と同じで少し操作に慣れる必要はあるのですが、全部 Visual Studio Code 上で完結するのはなかなか良いなと思いました。
さいごに
本日は Visual Studio Code 拡張の「GitHub Pull Requests」を使ってみたので、基本的な Issue と Pull Request の操作方法を紹介しました。
以前、Visual Studio 上で Issue や Pull Reqeust の操作を行う体験が良かったのですが、この拡張で Visual Studio Code 上も似たようなことが出来そうです。
操作に慣れが必要ですがしばらく使ってみようと思います。
